<template>
  <view class="w-card">
    <up-tabs :list="storeRecommArr" lineColor="#fd4b03" itemStyle="height:34px">
      <template #right>
        <view
            style="padding-left: 4px;"
            @tap="toPath('/shop/store/index')"
        >
          <up-icon
              name="arrow-right"
              size="12"
              bold
          ></up-icon>
        </view>
      </template>
    </up-tabs>
    <view class="grid-3 p-c-10" style="width: 100%;box-sizing: border-box;">
      <view v-for="i in 4" :key="i" @click="toPath('/shop/index/detail')">
        <image src="https://picsum.photos/200" class="goods-img"/>
        <view class="u-f-sm text-2" style="margin: 10rpx 0;">这是什么商品，你猜一猜，我反正不知道是啥</view>
        <view class="flex-between">
          <view class="u-f-sm">￥<span class="u-f-sl">88.00</span></view>
          <view class="f-c-9 u-f-sm">已售80+</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {storeRecommArr} from "@/util/options/system";
import {toPath} from "@/util/router/router";
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.goods-img {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
}
</style>